<div class="table-tools">
    <a href="__URL__/addUI" class="btn btn-info" title="添加滚动图"><i class="fa fa-copy"></i> 添 加 </a>
    <!--<button type="submit" class="btn btn-primary" title="删除勾选的资源"><i class="glyphicon glyphicon-remove"></i> 删 除 </button>-->
    <!--<button type="button" class="btn btn-success" title="重新排序资源" onclick="sortQuestions()"><i class="fa fa-copy"></i> 重 排 </button>-->
    <form class="form-inline" method="post" action="__URL__/index" id="search_form"  role="form">
        <input type="hidden" name="pagenum" id="pagenum_hidden" value="{$page.pagenum}">
        <input type="hidden" name="count" value="{$recordcount}">
        <!--<div class="form-group">-->
            <!--<input type="text" name="user_id" value="{$user_id}" placeholder="请输入擂主id">-->
            <!--<button type="submit">搜索</button>-->
        <!--</div>-->
    </form>
    <p>滚动图列表</p>
</div>

<table id="users-table" class="table table-striped table-hover table-condensed datatable">
    <thead>

    <tr id="user_{$room.id}">
        <th width="50px">ID</th>
        <th>图片</th>
        <th>点击跳转URL</th>
        <th>是否显示</th>
        <th>排序</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <volist name="list" id="image">
        <tr id="image_{$image.id}">
            <!--<td width="50px"><input name='id[]' type="checkbox" value="{$room.id}" /></td>-->
            <td class="question-name">{$image.id}</td>
            <td class="question-name"><a onclick="imageClick(this)" data-url="{$image.image_url}" class="btn btn-default btn-rounded btn-condensed btn-sm" title="查看图片"><span class="fa fa-pencil">查看</span></a></td>
            <td class="question-name">{$image.click_url}</td>
            <td class="question-name">
                <eq name="image.is_show" value="1">
                <img width="20" height="20" src="__PUBLIC__/images/yes.png" data-name="is_show"
                     data-id="{$image.id}" data-value="0" onclick="changeFieldStatus(this)"/>
                <else/>
                <img width="20" height="20" src="__PUBLIC__/images/cancel.png" data-name="is_show"
                     data-id="{$image.id}" data-value="1" onclick="changeFieldStatus(this)"/>
                </eq>
            </td>
            <td class="question-name"><input type="text" onkeyup="this.value=this.value.replace(/[^\d.]/g,'')"
                                             onpaste="this.value=this.value.replace(/[^\d.]/g,'')"
                                             onchange="ajaxUpdateField(this);" name="sort_num" size="4" data-table="t_scroll_image"
                                             data-id="{$image.id}" value="{$image.sort_num}"/></td>
            <td width="150px">
            <a href="__URL__/editUI/{$image.id}" class="btn btn-default btn-rounded btn-condensed btn-sm" title="编辑"><span class="fa fa-pencil">编辑</span>
            </a>
            <a onclick="deleteData('{$image.id}')" class="btn btn-default btn-rounded btn-condensed btn-sm" title="删除"><span class="glyphicon glyphicon-remove">删除</span></a>
            </td>
            <!--<td width="80px"><input name="sort[{$room.id}]" class="sort-input" type="text" value="{$room.sort}" /></td>-->
        </tr>
    </volist>
    </tbody>
</table>
<nav style="float:right">
    <spen class="total">共 {$recordcount}条记录</spen>
    <div class="fr">
        <ul class="pagination">
            <eq name="page['pagenum']" value="1">
                <li class="disabled">
                    <else/>
                <li>
            </eq>
            <a href="#" onclick="gotoPage('1')">«</a></li>
            <foreach name="page.pagenums" item="vo">
                <eq name="page['pagenum']" value="$vo">
                    <li class="active"><a href="#">{$vo}</a></li>
                    <else/>
                    <li><a href="#" onclick="gotoPage('{$vo}')">{$vo}</a></li>
                </eq>
            </foreach>
            <eq name="page['pagenum']" value="$page.endPage">
                <li class="disabled">
                    <else/>
                <li>
            </eq>
            <a href="#" onclick="gotoPage('{$page.totalpage}')">»</a></li>
        </ul>
    </div>
</nav>
<div class="modal fade" id="image_alert" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">滚动图</h4>
            </div>
            <div class="modal-body" id="image_content">
                <img id="image_path" width="100%" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <!--<button type="button" class="btn btn-primary">Save changes</button>-->
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="my-alert" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">提示</h4>
            </div>
            <div class="modal-body" id="hint_content">
            </div>
            <div class="modal-footer">
                <button type="button" id="close_btn" class="btn btn-default" data-dismiss="modal">关闭</button>
                <!--<button type="button" class="btn btn-primary">Save changes</button>-->
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="delete_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="delete_title">提示</h4>
            </div>
            <div class="modal-body" id="delete_content">
                您确定删除该记录？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="delete_confirm" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>
<script>
    function gotoPage(pagenum) {
        //提交form
        $('#pagenum_hidden').val(pagenum);
        $('#search_form').submit();
    }
    function imageClick(obj) {
        var url = $(obj).data('url');
        console.info(url);
        $('#image_path').attr('src','__ROOT__/'+url);
        $('#image_alert').modal('show');
    }
    function deleteData(id) {
        console.info(id);
        $("#delete_modal").modal();
        $('#delete_confirm').on('click', function(){
            $("#delete_modal").modal('hide');
            $.ajax({
                type: "GET",
                url: "__URL__/delete",
                data: {id: id},
                dataType: "json",
                success: function (data) {
                    console.info(data);
                    $("#hint_content1").empty().append(data.message);
                    $("#my-alert1").modal('show');
                    if (data.check) {
                        $('#image_' + id).hide();
                        $('.total').empty().append('共 '+data.count+' 条记录');
                    }
                },
                error: function (data) {
                    $("#hint_content1").empty().append('服务器忙');
                    $("#my-alert1").modal('show');
                }
            });


        })
    }
    function changeFieldStatus(obj) {
        var id = $(obj).data('id');
        var field = $(obj).data('name');
        var value = $(obj).data('value');
        $.ajax({
            type: 'POST',
            data: {id: id, field: field, value: value},
            url: "__URL__/updateField",
            dataType: "json",
            success: function (data) {
                if (data.success) {
                    if (value == 0) {
                        $(obj).data('value', '1');
                        $(obj).attr('src', '__PUBLIC__/images/cancel.png');
                    } else {
                        $(obj).data('value', '0');
                        $(obj).attr('src', '__PUBLIC__/images/yes.png');
                    }
                }
            },
            error: function (data) {
                $(".am-modal-bd").empty().append("请求超时！");
                $("#my-alert").modal();
            }
        });
    }
    function ajaxUpdateField(obj) {
        var table = $(obj).data('table');
        var id = $(obj).data('id');
        var field = $(obj).attr('name').replace(/field_/ig, ""); // 字段名字
        var value = $(obj).val();
        console.info(id);
        $.ajax({
            type: 'POST',
            data: {table: table, id: id, field: field, value: value},
            url: "__URL__/updateField",
            dataType: "json",
            success: function (data) {
                console.info(data);
//                $("#update_field").empty().append(data.message);
//                $("#my_update_field").modal();
            },
            error: function (data) {
                $(".am-modal-bd").empty().append("请求超时！");
                $("#my-alert").modal();
            }
        });
    }
</script>